<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>08.bootstrap的导航与导航条</title>
        <!-- bootstrap的动态功能都是依靠jquery的， 所以要引入jquery，而且要在它的前面-->
        <!-- jquery库, bootstrap依赖于jquery -->
        <script src="static/js/jquery-3.4.1.js"></script>
        <!-- bootstrap的样式 -->
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <!-- bootstrap的js -->
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <!-- 基本的导航 -->
        <ul class="nav nav-tabs">
            <li><a href="">国语</a></li>
            <li><a href="">数学</a></li>
            <li><a href="">英语</a></li>
        </ul>

        <div class="container">
            <div class="row">
                <!-- 默认导航 -->
                <p class="lead">默认导航</p>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="">国语</a></li>
                    <li><a href="">数学</a></li>
                    <li><a href="">英语</a></li>
                </ul>
                <br/>
                <br/>
                <hr/>

                <!-- 胶囊式导航 -->
                <p class="lead">胶囊式导航</p>
                <ul class="nav nav-pills">
                    <li class="active"><a href="">国语</a></li>
                    <li><a href="">数学</a></li>
                    <li><a href="">英语</a></li>
                </ul>
                <br/>
                <br/>
                <hr/>

                <!-- 堆栈式导航 -->
                <p class="lead">堆栈式导航</p>
                <ul class="nav nav-stacked">
                    <li class="active"><a href="">国语</a></li>
                    <li><a href="">数学</a></li>
                    <li><a href="">英语</a></li>
                </ul>
                <br/>
                <br/>
                <hr/>

                <!-- nav-justified 自适应 -->
                <p class="lead">自适应的导航</p>
                <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="">国语</a></li>
                    <li><a href="">数学</a></li>
                    <li><a href="">英语</a></li>
                </ul>
            </div>

            <br/>
            <br/>
            <hr/>
            <!-- 导航条，固定在了最下面, 默认的样式 -->
            <p class="lead">导航条，固定在了最下面</p>
            <div class="row">
                <nav class="navbar navbar-fixed-bottom navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                    data-target="#my-navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">点我啊！</a>
                        </div>

                        <div class="collapse navbar-collapse" id="my-navbar">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="baidu.com">百度<span class="sr-only">(current)</span></a></li>
                                <li><a href="#">京东</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">课程选择<span
                                            class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">语文</a></li>
                                        <li><a href="#">数学</a></li>
                                        <li><a href="#">英语</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">计算机</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">体育</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="点击搜索">
                                </div>
                                <button type="submit" class="btn btn-default">提交选择</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">友情链接</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">想要什么？<span
                                            class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">日语培训</a></li>
                                        <li><a href="#">韩国练习生</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">真人荷官</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>

            <br/>
            <br/>
            <hr/>
            <!-- 路径导航 -->
            <p class="lead">品牌导航</p>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <img alt="品牌" style="width: 25px; height: 25px"
                                 src="https://avatars0.githubusercontent.com/u/15311937?s=60&v=2"/>
                        </a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="baidu.com">百度<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">京东</a></li>
                    </ul>
                </div>
            </nav>
            <br/>
            <br/>
            <hr/>

            <!-- 路径导航 -->
            <p class="lead">路径导航</p>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">Library</a></li>
            </ol>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            <br/>
            <br/>
        </div>

    </body>
</html>

